<template>
    <div class="form">
        <img src="~bg/title.png" alt="">
        <form action="" class='realForm'>
            <el-input
            prefix-icon="el-icon-edit"
            placeholder="请输入账号"
            v-model="username"
            clearable>
            <template slot="prepend">账号</template>
            </el-input>
            <el-input
            class='password'
            prefix-icon="el-icon-goods"
            placeholder="请输入密码"
            v-model="password"
            clearable>
            <template slot="prepend">密码</template>
            </el-input>
            <el-button 
            type="primary" 
            class='btn'
            @click='pushUser'>提交</el-button>
            
        </form>
    </div>
</template>

<script>
import axios from 'axios'
import { mapMutations,mapState } from 'vuex'
export default {
    name : "LoginForm",
    data (){
        return {
            username: '',
            password:'',
            defaultActive:''
        }
    },
    computed:{
        ...mapState(['baseUrl','userName','scope'])
    },
    methods:{
        pushUser (){

            if(this.username==''||this.password==""){
                this.$alert('账号或密码不能为空', '特别提示', {
                    confirmButtonText: '确定',
                    // callback: action => {
                    //     this.$message({
                    //     type: 'info',
                    //     message: `action: ${ action }`
                    //     });
                    // }
                });
            }else{
                this.getUserInfo()
            }

            

        },
        getUserInfo (){
                // axios.get('/api/v1/banner/1')
                // .then(this.getHomeInfoSucc)
                let that = this
                axios.get(this.baseUrl+'token/app',
                {
                    params:{
                        ac:this.username,
                        se:this.password
                    }
                })
                .then(function (response) {
                    // console.log(response)
                    if(response){
                        
                        try {
                            
                            // console.log(response.data.data.app)
                            this.setLocalStorage('token',response.data.data.token)
                            this.changeUserName(response.data.data.app.nick_name)
                            this.changeScope(response.data.data.app.scope)
                            localStorage.defaultActive = '/indexDefault'
                        } catch (e){}
                        this.defaultActive = '/indexDefault'
                        this.changeActive(this.defaultActive)
                        // console.log(localStorage)
                        this.$router.push('/indexDefault')
                        this.$message({
                                    message: '恭喜你，登陆成功',
                                    type: 'success',
                                    duration:'3000',
                                    showClose:true,
                                    });
                    }
                }.bind(this))
                .catch(function (error) {
                    console.log(error)
                    if(error){
                        that.$alert('账号或密码错误', '特别提示', {
                        confirmButtonText: '确定',
                        type: 'warning',
                        center: true
                        });
                    }
                    
                });
            },
            ...mapMutations(['changeActive','changeUserName','changeScope']),
        getHomeInfoSucc (res){
                console.log(res)
        },
        setLocalStorage (key,val){
        var exp=new Date().getTime()+2*24*60*60*100;  //令牌过期时间
        var obj={
            val:val,
            exp:exp
        };
        localStorage.setItem(key,JSON.stringify(obj));
    },    
    }
    
}    
</script>


<style lang="stylus" scoped>
.form
    width 600px
    
    position absolute 
    top:50%
    left 50%
    z-index 10
    margin-top:-250px
    margin-left -300px
    .realForm
        width 300px
        margin 0 auto
        .password
            margin-top 10px
        .btn
            width 100%  
            margin-top 10px 

</style>
